<!DOCTYPE html>
<html>
<head>
<script src="media-file.js"></script>
<style>
  .test {
    object-fit: contain;
    height: 200px;
  }

  video {
    outline: 15px solid blue;
    border: 15px solid green;
    background: orange;
    padding: 15px;
    margin: 20px;
    width: 300px;
  }
</style>
</head>

<body>
  <!-- This test passes if:
    1) the final colored blocks in the series of colored blocks in the
       video content box area are respectively: cyan, blue, green
    2) the video seek point is near 00:00:03.19 -->
  <video class="test"/>
</body>

<script>
window.onload = function() {
  var video = document.querySelector('video');

  video.addEventListener('seeked', function() {
    if (window.testRunner)
      setTimeout(function() { testRunner.notifyDone() }, 0);
    video.pause();
  }, false);

  setSrcByTagName('video', 'content/test.ogv');
  seek(video, 3.8);
};

function seek(video, time) {
  video.currentTime = time;
}

if (window.testRunner)
  testRunner.waitUntilDone();
</script>
</html>
